<template>
  <div class="price-table">
    <p class="tips">
      注意：以下内容来自河南省医疗结构服务项目和价格汇编（2017年9月版），仅供参考，相关医疗服务价格变动以河南省发改委网站《价格政策文件》栏目公告为准。
    </p>
    <div class="van-hairline--top" style="margin: 5px 0 10px 0"></div>
    <van-tabs type="card" v-model="active" color="#4ECE40" background="#EEEEEE" @change="handleChange">
      <van-tab title="药品价格标准" name="1"></van-tab>
      <van-tab title="医疗服务价格标准" name="2"></van-tab>
    </van-tabs>
    <div class="van-hairline--top" style="margin: 5px 0;width:100%;overflow:hidden"></div>
    <template v-if="active == '1'">
      <van-row class="row-title">
        <van-col :span="6">
          <span class="title">项目名称</span>
        </van-col>
        <van-col :span="6">
          <span class="title">剂量单位</span>
        </van-col>
        <van-col :span="6">
          <span class="title">规格</span>
        </van-col>
        <van-col :span="6">
          <span class="title">价格（元）</span>
        </van-col>
      </van-row>
      <van-grid direction="horizontal" :column-num="4" :gutter="0.5" v-for="(item,index) in infoList" :key="index" style="padding: 0 10px" :class="index % 2 ? 'pink' : ''">
        <van-grid-item>
          {{item.name}}
        </van-grid-item>
        <van-grid-item>
          {{item.measurement}}
        </van-grid-item>
        <van-grid-item>
          {{item.norms}}
        </van-grid-item>
        <van-grid-item>
          {{item.price}}
        </van-grid-item>
      </van-grid>
      
    </template>
    <template v-else>
      <van-row class="row-title">
        <van-col :span="6">
          <span class="title">编码</span>
        </van-col>
        <van-col :span="6">
          <span class="title">项目名称</span>
        </van-col>
        <van-col :span="6">
          <span class="title">项目单位</span>
        </van-col>
        <van-col :span="6">
          <span class="title">价格（元）</span>
        </van-col>
      </van-row>
      <van-grid direction="horizontal" :column-num="4" :gutter="0.5" v-for="(item,index) in infoList" :key="index" style="padding: 0 10px" :class="index % 2 ? 'pink' : ''">
        <van-grid-item>
          {{item.number}}
        </van-grid-item>
        <van-grid-item>
          {{item.name}}
        </van-grid-item>
        <van-grid-item>
          {{item.measurement}}
        </van-grid-item>
        <van-grid-item>
          {{item.price}}
        </van-grid-item>
      </van-grid>
      
    </template>
    <div class="pagination">
      <van-pagination v-model="currentPage" @change="handlePage" :page-count="pageCount" mode="simple" />
    </div>
  </div>
</template>

<script>
import { systemPrice,systemMedicalsPrice } from '@/service/server';
export default {
  data() {
    return {
      active: '1',
      currentPage:1,
      pageCount: 0,
      infoList: []
    };
  },

  components: {},

  computed: {},
  created(){
    this.queryPrice()
  },

  methods: {
    handleChange(e){
      console.log(e,'handleChange')
      if(e == 2){
        this.queryMedical()
      }else{
        this.queryPrice()
      }
    },
    async queryPrice(){
      let result = await systemPrice();
      if(result.status == 200){
        this.infoList = result.data.model
        this.pageCount = result.data._meta.pageCount
      }else{
        this.$toast(result.message)
        this.infoList = []
      }
    },
    async queryMedical(){
      let result = await systemMedicalsPrice();
      if(result.status == 200){
        this.infoList = result.data.model
        this.pageCount = result.data._meta.pageCount
      }else{
        this.infoList = []
        this.$toast(result.message)
      }
    },
    handlePage(){
      let params = {
        page: this.currentPage
      }
      if(this.active == 2){
        this.queryMedical()
      }else{
        this.queryPrice()
      }
    }
  },
};
</script>
<style lang='less'>
.price-table{
  .tips{
    padding: 10px;
    line-height: 1.5;
    color: #666;
  }
  .van-tabs__nav--card{
    border-radius: 8px;
    height: 40px;
    border: none!important;
  }
  .van-tabs--card>.van-tabs__wrap{
    height: 40px;
    .van-tab{
      &:first-child{
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
      &:last-child{
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  .row-title{
    padding: 12px 0;
    .title{
      color: #000;
      font-size: 14px;
      text-align: center;
      display: flex;
      justify-content: center;
    }
  }
  .van-grid-item{
    color: #999999;
  }
  .van-tabs__nav--card .van-tab{
    background: #EEEEEE;
    color: #999999!important;
  }
  .van-tab.van-tab--active{
    color: #fff!important;
  }
  .odd-style{
    .van-grid-item{
      .van-grid-item__content{
        background: #f8f8f8;
      }
    }
  }
  .pagination{
    width: 100%;
    padding: 10px;
    position: fixed;
    bottom: 15px;
    background: rgba(255,255,255,.5)
  }
}
.pink{
  .van-grid-item{
    .van-grid-item__content{
      background: #FFF0F0;
    }
  }
}
</style>